<!-- 生命周期 -->
<template>
    <div> {{ val }} </div>
    <button @click="change">渲染</button>
    <button @click="domadd">元素改变</button>
    <div id="a" ></div>
</template>

<script setup lang="ts">
    import { ref, reactive, 
    onMounted, onBeforeMount, onBeforeUpdate, onUpdated, 
    onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered} from "vue";
    let val = ref(1), show = ref(false)
    function change():void {
        val.value = 1000
    }
    let domadd = ()=>{
        show.value = true;
        let b = document.createElement(`H1`);
        b.innerText = 'hello'
        document.getElementById('a').appendChild(b);
    }

    // 在 Dom 加载前触发
    onBeforeMount(() => {
        console.log('onBeforeMount')
    })
    // 在 Dom 加载完触发
    onMounted(() => {
        console.log('onMounted')
    })
    // 在页面更新前触发
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
    })
    // 在页面更新完触发
    onUpdated(() => {
        console.log('onUpdated')
    })
    // 在组件销毁之前触发
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
    })
        // 在组件销毁完成触发
    onUnmounted(() => {
        console.log('onUnmounted')
    })
    // 在每次渲染后收集响应式依赖
    onRenderTracked((event) => {
        console.log('onRenderTracked')
        console.log(event)
    })
    // 在每次触发页面重新渲染时自动执行
    onRenderTriggered(({key, target, type}) => {
        console.log('onRenderTriggered')
        console.log({key, target, type})
    })
</script>
<style scoped>
</style>